<template lang="html">
    <div id="tmpl">
        <!--1.0 图片分类-->
        <div id='cate'>
            <ul v-bind="{style:'width:'+ulWidth+'px'}">
                <li @click="getimages(0)">全部</li>
                <li v-for="item in cates" @click="getimages(item.id)">{{item.title}}</li>
            </ul>
        </div>
        <!--2.0 图片列表-->
        <div id='imglist'>
        <ul>
            <li v-for="(item,index) in list" :key='index'>
                <router-link v-bind="{to: '/photo/photoinfo/'+item.id}">
                <img v-lazy="item.img_url">
                <div id="desc">
                    <h5 v-text="item.title"></h5>
                    <p v-text="item.zhaiyao"></p>
                </div>
                </router-link>
            </li>
        </ul>
        </div>
    </div>
</template>

<script>
import common from '../../kits/common.js';
import { Toast } from 'mint-ui';

export default {
    data(){
        return {
            ulWidth: 320,
            cates: [],  //用来存储图片分类数据的数组
            list: [] //用来存放图片的接受
        }
    },
    created(){
        //分类数据的获取
        this.getcates();

        //图片数据的获取
        var all = 0; //默认获取所有图片
        this.getimages(all);
    },
    methods: {
        getcates(){
            //1.0确定url
            const url = common.apij + '/api/getimgcategory';
            //2.0$http.get请求
            this.$http.get(url).then(function(res) {
                if (res.body.status != 0) {
                    Toast(res.body.message);
                    return;
                }

                //3.0 实现赋值操作
                this.cates = res.body.message;

                //4.0 动态更新分类ul所在长度
                const w = 62;
                const count = res.body.message.length + 1;
                this.ulWidth = w *count;
            })
        },
        //二、加载图片数据
        getimages(cateid) {
            //没有传参，默认传递0，获取所有图片
            var cateid = cateid || 0;
            //确定url
            var url = common.apij + '/api/getimages/' + cateid;
            this.$http.get(url).then(function(res) {
                var body = res.body;
                if (body.status != 0) {
                    Toast(body.message);
                    return;
                }
                this.list = body.message;
            })
        }
    }
}
</script>

<style lang="css" scoped>
/*1.0 图片分类*/
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin: 0px;
        width:1000px;
		padding-left: 10px;
	}
	#cate li{
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}
    /*2.0 实现图片列表样式*/
    	#imglist{

    	}
    	#imglist ul {
    		padding-left: 0px;
    	}
    	#imglist li{
    		list-style:none;
    		position: relative ;
    	}
    	#imglist img{
    		width:100%;
    		height: 300px;
    	}

    	#desc{
    		width: 100%;
    		background-color: rgba(0,0,0,0.2);
    		position: absolute;
    		bottom: 2px;
    		left: 0px;
    	}

        #desc h5{
            color: #ffffff;
            font-weight: bold;
        }
        #desc p{
            color:#fff;
        }

        image[lazy=loading] {
            width: 40px;
            height: 300px;
            margin: auto;
        }
</style>
